
import Configer from "../../../script/frame/apiModel/config/Configer";
import {TextGuiKey, TextGuiMap, UIConfigKey} from "../../../script/constant/UIConfig";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, View} from "../../../script/frame/apiModel/gui/React";
import {TextGuiBarInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";

export interface IProp {
}
export interface IState {
    visibles: boolean[];
    uiName: string;
    path: string;
    size: { w: number, h: number };
    pos: { x: number, y: number };
    autoClose: boolean;
}

export default class TextGuiBar extends TextGuiBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        const arr: boolean[] = [];

        this.state = {
            visible: true,
            visibles: arr,
            uiName: '',
            path: '',
            size: { w: 0, h: 0 },
            pos: { x: 0, y: 0 },
            autoClose: true,
        }
    }

    render = () => {
        const textGuiMaps: TextGuiMap[] = Configer.getUIConfig(UIConfigKey.TextGuiMaps);
        return <View   key={GuiKeys.textGuiContent}>
            {
                textGuiMaps.map(
                    (textGuiMap, index, array) => {
                        let path = '', size, pos;
                        if (textGuiMap.key === ResourceKey.generate) {
                            if (this.state.path) {
                                const resourceId = this.state.path;
                                const resourceData = DataRouter.getResourceDataByResourceId(resourceId);
                                path = resourceData?.src;
                            }
                            size = this.state.size;
                            pos = this.state.pos;
                        } else {
                            if (textGuiMap.key) {
                                const resourceKey = textGuiMap.key;
                                path = Configer.getResource(resourceKey);
                            }
                            size = textGuiMap.size;
                            pos = textGuiMap.pos;
                        }
                        return <View   key={`${GuiKeys.textGuiItem}|${index}`} style={{ hidden: !this.state.visibles[index], backgroundImage: path, width: size.w, height: size.h, left: pos.x, top: pos.y }}></View>
                    }
                )
            }
        </View>
    }

    showTextGui = (visible: boolean, index: number, uiName: string, path: string, size: { h: number, w: number }, pos: { x: number, y: number }, autoClose: boolean) => {
        this.state.visibles[index] = visible;
        print(index);
        this.setState({
            ...this.state,
            uiName,
            path,
            size,
            pos,
            autoClose: autoClose,
        })
    }

    getIndexByUiName = (uiName: ResourceKey) => {
        const textGuiMaps: TextGuiMap[] = Configer.getUIConfig(UIConfigKey.TextGuiMaps);
        for (let i = 0; i < textGuiMaps.length; i++) {
            const textGuiMap = textGuiMaps[i];
            if (uiName === textGuiMap.key) {
                return i;
            }
        }
        return 0;
    }
}